<script lang="ts">
  import { onMount } from 'svelte';
  import TaskDetail from './TaskDetail.svelte';
  import { t } from '../../lib/i18n';
  
  // 从URL获取任务ID
  let taskId = '';
  
  onMount(() => {
    // 解析URL路径，获取任务ID
    const pathParts = window.location.pathname.split('/');
    if (pathParts.length > 2 && pathParts[1] === 'tasks') {
      taskId = pathParts[2];
    } else {
      // 如果URL中没有任务ID，重定向到首页
      window.location.href = '/';
    }
  });
</script>

{#if taskId}
  <TaskDetail {taskId} />
{:else}
  <div class="loading-container">
    <div class="spinner"></div>
    <p>{$t('common.loading')}</p>
  </div>
{/if}

<style>
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
  }
  
  .spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #4a90e2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style> 
